import React, { Component } from "react";
import { Card, Avatar, Tabs } from "antd";
import LinesEllipsis from "react-lines-ellipsis";
import {
  HourglassOutlined,
  FireOutlined,
  LikeFilled,
  StarFilled,
  FireFilled,
} from "@ant-design/icons";
import { http } from "../../../api";
import { observer } from "mobx-react";
import moment from "moment";
import { baseURL } from "../../../api/ajax";
const { TabPane } = Tabs;
const { Meta } = Card;

@observer
export default class ExpList extends Component {
  state = {
    explist: [],
    passexplist: [],
    list: [],
    defaultActiveKey: "1",
    hover: false,
    flag: false,
    show: false,
  };
  arraySort(a, b) {
    var time1 = new Date(a.time);
    var time2 = new Date(b.time);
    return time2.getTime() - time1.getTime();
    //降序
  }
  arraySortdesc(a, b) {
    return b.heat - a.heat;
    //降序
  }
  tabClickHandler = (params) => {
    // console.log(params);
    this.setState({
      defaultActiveKey: params,
    });
    if (params == "1") {
      var passexplist = this.state.passexplist.sort(this.arraySort);
      this.setState({
        passexplist: passexplist,
      });
    } else {
      var passexplist = this.state.passexplist.sort(this.arraySortdesc);
      this.setState({
        passexplist: passexplist,
      });
    }
  };

  componentDidMount() {
    http.experiencelist().then((res) => {
      if (res.data.code == 200) {
        var list = res.data.val.filter((item, i) => {
          return item.status !== 0;
        });
        list.forEach((item, index) => {
          http.getuserinfo({ phone: item.phone }).then((res) => {
            list[index].avatar = res.data.val[0].avatar;
            list[index].username = res.data.val[0].username;
          });
        });
        setTimeout(() => {
          this.setState({
            passexplist: list.sort(this.arraySort),
          });
        }, 500);

        // console.log(this.state.passexplist);
      }
    });
  }
  gotodetails = (item, i) => {
    // console.log(this.state.passexplist[i].avatar);
    http
      .updateExperience({
        _id: this.state.passexplist[i]._id,
        avatar: this.state.passexplist[i].avatar,
        username: this.state.passexplist[i].username,
      })
      .then((res) => {
        this.props.history.push(
          "/main/tiku/experience/details?_id=" + item._id
        );
      });
  };
  render() {
    const { explist, passexplist, defaultActiveKey, flag, show } = this.state;
    // console.log(explist);

    return (
      <div>
        <Tabs
          activeKey={defaultActiveKey}
          onTabClick={(params) => this.tabClickHandler(params)}
        >
          <TabPane
            tab={
              <span>
                <HourglassOutlined />
                最新
              </span>
            }
            key="1"
          >
            {passexplist &&
              passexplist.map((item, i) => {
                return (
                  <Card
                    key={i}
                    onClick={() => this.gotodetails(item, i)}
                    style={{ width: "75%", padding: " 0 10px", margin: 10 }}
                    hoverable
                  >
                    <div>
                      <h3>{item.title}</h3>
                      <LinesEllipsis
                        text={item.content
                          .replace(/<[^<>]+>/g, "")
                          .replace(/&nbsp;/gi, "")}
                        maxLine={3}
                        ellipsis="..."
                        trimRight
                        basedOn="letters"
                        style={{
                          width: "100%",
                        }}
                      />
                    </div>
                    <div
                      style={{
                        display: "flex",
                        marginTop: 20,
                        alignItems: "center",
                        justifyContent: "space-between",
                      }}
                    >
                      <div
                        style={{
                          float: "left",
                          display: "flex",
                          alignItems: "center",
                        }}
                      >
                        {item.avatar && (
                          <Avatar
                            src={item.avatar.replace(/public/, baseURL)}
                            size={48}
                          />
                        )}
                        <span style={{ margin: "0 10px", fontSize: "14px" }}>
                          {item.username}
                        </span>
                        <span style={{ fontSize: "12px" }}>
                          {moment(item.time).format("YYYY-MM-DD hh:mm:ss")}
                        </span>
                      </div>
                      <div
                        style={{
                          float: "right",
                          display: "flex",
                          justifyContent: "center",
                          alignItems: "center",
                        }}
                      >
                        <StarFilled
                          style={{
                            marginLeft: 20,
                            marginRight: 5,
                            cursor: "pointer",
                            display: "block",
                          }}
                          className="changeColor"
                          onClick={(e) => {
                            e.stopPropagation();
                          }}
                        />
                        <span>{item.collect}</span>

                        <LikeFilled
                          style={{
                            marginLeft: 20,
                            marginRight: 5,
                            cursor: "pointer",
                            display: "block",
                          }}
                          className="changeColor"
                          onClick={(e) => {
                            e.stopPropagation();
                          }}
                        />
                        <span>{item.star}</span>

                        <FireFilled
                          style={{
                            marginLeft: 20,
                            marginRight: 5,
                            cursor: "pointer",
                            display: "block",
                          }}
                          className="changeColor"
                          onClick={(e) => {
                            e.stopPropagation();
                          }}
                        />
                        <span>{item.heat}</span>
                      </div>
                    </div>
                  </Card>
                );
              })}
          </TabPane>
          <TabPane
            tab={
              <span>
                <FireOutlined />
                最热
              </span>
            }
            key="2"
          >
            {explist &&
              passexplist.map((item, i) => {
                return (
                  <Card
                    key={i}
                    style={{ width: "75%", padding: " 0 10px", margin: 10 }}
                    hoverable
                  >
                    <div>
                      <h3>{item.title}</h3>
                      <LinesEllipsis
                        text={item.content
                          .replace(/<[^<>]+>/g, "")
                          .replace(/&nbsp;/gi, "")}
                        maxLine={3}
                        ellipsis="..."
                        trimRight
                        basedOn="letters"
                        style={{
                          width: "100%",
                        }}
                      />
                    </div>
                    <div
                      style={{
                        display: "flex",
                        marginTop: 20,
                        alignItems: "center",
                        justifyContent: "space-between",
                      }}
                    >
                      <div
                        style={{
                          float: "left",
                          display: "flex",
                          alignItems: "center",
                        }}
                      >
                        {item.avatar && (
                          <Avatar
                            src={item.avatar.replace(/public/, baseURL)}
                            size={48}
                          />
                        )}
                        <span style={{ margin: "0 10px", fontSize: "14px" }}>
                          {item.username}
                        </span>
                        <span style={{ fontSize: "12px" }}>2021-6-3</span>
                      </div>
                      <div
                        style={{
                          float: "right",
                          display: "flex",
                          justifyContent: "center",
                          alignItems: "center",
                        }}
                      >
                        <StarFilled
                          style={{
                            marginLeft: 20,
                            marginRight: 5,
                            cursor: "pointer",
                            display: "block",
                          }}
                          className="changeColor"
                          onClick={(e) => {
                            e.stopPropagation();
                          }}
                        />
                        <span>{item.collect}</span>

                        <LikeFilled
                          style={{
                            marginLeft: 20,
                            marginRight: 5,
                            cursor: "pointer",
                            display: "block",
                          }}
                          className="changeColor"
                          onClick={(e) => {
                            e.stopPropagation();
                          }}
                        />
                        <span>{item.star}</span>
                        <FireFilled
                          style={{
                            marginLeft: 20,
                            marginRight: 5,
                            cursor: "pointer",
                            display: "block",
                          }}
                          className="changeColor"
                          onClick={(e) => {
                            e.stopPropagation();
                          }}
                        />
                        <span>{item.heat}</span>
                      </div>
                    </div>
                  </Card>
                );
              })}
          </TabPane>
        </Tabs>
      </div>
    );
  }
}
